<template>
  <div class="app-container home billing-rules">
    <p class="title">当前计费规则：</p>
    <div class="rule">
      <p>
        订单配送费 = <span class="orangeHighlight">{{ orderAmountCalculationList.basicPrice }}</span>(基础配送费)
        + <span class="yellowHighlight">重量附加费</span> * <span class="orangeHighlight">{{ orderAmountCalculationList.weightWeight }}</span>(重量权重)
        + <span class="yellowHighlight">距离附加费</span> * <span class="orangeHighlight">{{ orderAmountCalculationList.distanceWeight }}</span>(距离权重)
        + <span class="orangeHighlight">{{ orderAmountCalculationList.weatherPremium }}</span>(天气溢价)
      </p>
      <p>
        平台抽成：<span class="orangeHighlight">{{ (orderAmountCalculationList.platformExtraction * 100).toFixed(2) }}%</span>
      </p>
      <div><label>订单费用演示:</label><p></p></div>
      <label for="weightInput">订单重量(kg)：</label>
      <input id="weightInput" type="number" step="1" min="1" v-model="inputWeight">
      <label for="distanceInput">订单距离(km)：</label>
      <input id="distanceInput" type="number" step="1" min="1" v-model="inputDistance">
      <button @click="calculateMoney">计算金额</button>
      <p>
        <span >{{ orderFees }}</span>&nbsp;&nbsp;&nbsp;
        <span >{{ riderIncome }}</span>&nbsp;&nbsp;&nbsp;
        <span >{{ platformExtraction }}</span>
      </p>
    </div>
    <OrderAmountCalculation @transferCalculation="getOrderAmountCalculationList"></OrderAmountCalculation>

    <div class="row">
      <el-col :span="12" class="column">
        <Weight @transferWeightAmount="getWeightAmountList"></Weight>
      </el-col>
      <el-col :span="12" class="column">
        <Distance @transferDistanceAmount="getDistanceAmountList"></Distance>
      </el-col>
    </div>
  </div>
</template>

<script>
import Weight from "../weightAmount/index.vue"
import Distance from "../distanceAmount/index.vue"
import OrderAmountCalculation from "../orderAmountCalculation/index"

export default {
  name: "Index",
  components:{
    Weight,
    OrderAmountCalculation,
    Distance,
  },
  data() {
    return {
      // 版本号
      version: "3.8.5",
      //金额计算列表
      orderAmountCalculationList:{"basicPrice":0},
      //重量附加费、距离附加费列表
      weightAmountList:[],
      distanceAmountList:[],
      //演示输入
      inputWeight: null,
      inputDistance: null,
      //费用
      orderFees: "",
      riderIncome:"",
      platformExtraction:""
    };
  },
  methods: {
    //接受子组件OrderAmountCalculation的金额计算系数
    getOrderAmountCalculationList(msg){
      this.orderAmountCalculationList=msg;
    },
    //接受子组件的重量附加费
    getWeightAmountList(msg){
      this.weightAmountList=msg;
    },
    getDistanceAmountList(msg){
      this.distanceAmountList=msg;
    },
    //计费演示算法
    calculateMoney() {
      //重量向上取整、距离向下取整
      const inputWeight = Math.ceil(parseFloat(this.inputWeight));
      const inputDistance = Math.floor(parseFloat(this.inputDistance));
      
      let weightMoney = 0;
      let distanceMoney = 0;
      let foundWeight = false;
      let foundDistance = false;
      if(inputWeight){
        /**重量附加费到特定值后费用不再累加，如9kg之后均为10元*/
        if(inputWeight >= this.weightAmountList[this.weightAmountList.length-1].weight){
          weightMoney = this.weightAmountList[this.weightAmountList.length-1].money;
          foundWeight = true;
        }
        for (let i = 0; i < this.weightAmountList.length; i++) {
          if(inputWeight === this.weightAmountList[i].weight) {
            weightMoney = this.weightAmountList[i].money;
            foundWeight = true;
            break;
          }
        }
      }else{
        this.orderFees = "请输入重量！";
        return
      }

      if(inputDistance){
        const lastDistance=this.distanceAmountList[this.distanceAmountList.length-1].distance
        /**距离附加费到特定值后费用变更，如10公里之后每公里+2元*/
        if(inputDistance > lastDistance){
          distanceMoney = this.distanceAmountList[this.distanceAmountList.length-1].money+(inputDistance-lastDistance)*2;
          foundDistance = true;
        }
        for (let i = 0; i < this.distanceAmountList.length; i++) {
          if (inputDistance === this.distanceAmountList[i].distance) {
            distanceMoney = this.distanceAmountList[i].money;
            foundDistance = true;
            break;
          }
        }
      }else{
        this.orderFees = "请输入距离！";
        return
      }
      // if (foundWeight && foundDistance) {
      const totalMoney = weightMoney*this.orderAmountCalculationList.weightWeight
      + distanceMoney*this.orderAmountCalculationList.distanceWeight 
      + this.orderAmountCalculationList.basicPrice 
      + this.orderAmountCalculationList.weatherPremium;

      this.orderFees = "订单配送费:" + totalMoney;
      this.riderIncome="骑手收益:" + (totalMoney*(1-this.orderAmountCalculationList.platformExtraction));
      this.platformExtraction="平台抽成:" + (totalMoney*this.orderAmountCalculationList.platformExtraction)
      // } else {
      //   this.result = "未找到对应的金额";
      // }
    },
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
//计费规则样式@xingxing
.billing-rules {
  font-family: Arial, sans-serif;
}

.title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.rule {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  font-size: 17px;
}

.orangeHighlight {
  background-color: rgb(240, 96, 42);
  padding: 2px 4px;
  border-radius: 3px;
  color: white;
}
.yellowHighlight {
  background-color: rgb(254, 203, 46);
  padding: 2px 4px;
  border-radius: 3px;
  color: black;
}
//重量、距离附加费表样式
.row {
  width: 100%;
  display: flex;
  // flex-wrap: wrap;
}

.column {
  margin-right: 20px;
}

@media (max-width: 768px) {
  .row {
    width: 100%;
    flex-direction: column;
  }

  .column {
    width: 100%;
    margin-right: 0;
  }
}
</style>

